<template>
  <el-container>
    <el-header height="40px">
      <slot />
      <el-input class="searchInput" :style="searchStyle || (selection && isDialog ? '' : 'width: 300px')" v-model="searchText" suffix-icon="el-icon-search" placeholder="搜索..."></el-input>
    </el-header>
    <el-main class="searchTable_main">
      <el-table v-loading="sloading" ref="searchTable" class="searchTable_table" height="100%" :key="total" :data="dataList" @sort-change="sortChange" @select="selectChange" @select-all="selectChange" @expand-change="tableExpandChange" :expand-row-keys="expandRowKeys" :row-key="expandKey">
        <el-table-column v-if="selection" width="55" type="selection">
        </el-table-column>
        <el-table-column type="expand" v-if="expandComponent" width="55">
          <template slot-scope="scope">
            <component :expandKey="scope.row[expandKey]" v-bind:is="expandComponent">
            </component>
          </template>
        </el-table-column>
        <!-- 是按钮则生成按钮 -->
        <el-table-column v-for="item in columns" :key="item.key" :prop="item.key" :width="item.width" :label="item.title" :formatter="item.render" :sortable="sortable" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="item.type === 'button'">
              <el-button size="mini" v-for="btn in item.buttons" :key="btn.text" @click="btn.click(scope.row, scope.$index)">
                {{ btn.render ? btn.render(scope.row, scope) : btn.text }}
              </el-button>
            </span>
            <span v-else-if="item.type === 'switch'">
              <el-switch v-model="scope.row[item.key || 'switch_value']" active-color="#13ce66" inactive-color="#ff4949" style="position: relative; top: -3px">
              </el-switch>
              {{ scope.row[item.key || 'switch_value'] ? '是' : '否' }}
            </span>
            <span v-else-if="item.type === 'select'">
              <el-select v-model="scope.row[item.key || 'select_value']" placeholder="请选择">
                <el-option v-for="ele in dicList" :key="ele[item.selectOption.id]" :label="ele[item.selectOption.value]" :value="ele[item.selectOption.id]">
                </el-option>
              </el-select>
            </span>
            <span v-else v-html="
                item.render
                  ? item.render(
                      scope.row,
                      scope.column,
                      scope.row[item.key],
                      scope
                    )
                  : scope.row[item.key]
              "></span>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer :class="[pageSmall ? 'smallPage' : '', 'page']" style="padding: 0px" height="30px">
      <el-pagination :small="pageSmall || false" v-if="paginationData" :layout="pageLayout || 'prev, pager, next, jumper'" :page-size="pageSizeData" :total="total" @current-change="pageChangeHandler">
      </el-pagination>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      searchText: '',
      expandRowKeys: Array.empty,
      sortProp: '',
      sortOrder: '',
      pageIndex: 1,
      total: 0,
      sloading: this.$props.loading || false,
      pageSizeData: this.$props.pageSize || this.GV.pageSize,
      sortable:
        this.$props.sortable === undefined
          ? this.GV.sortable
          : this.$props.sortable,
      paginationData:
        this.$props.pagination === undefined
          ? this.GV.pagination
          : this.$props.pagination,
      onExpand: ''
    }
  },
  components: {
    expandComponent: ''
  },
  props: {
    pagination: {
      type: Boolean,
      default: undefined
    }, // 是否分页
    pageSize: Number, // 每页条数
    data: Array, // 数据列表
    columns: Array, // 表头
    searchKeys: Array, // 搜索关键字
    selection: Function, // 前面的checkbox  传入selectChange事件
    expandChange: Function, // 行展开关闭事件
    expandComponent: String, // 行展开的模板
    expandKey: String, // 行key
    dicList: String,
    searchStyle: String, // 搜索框样式
    pageLayout: String, // 分页布局
    pageSmall: Boolean, // 是否是mini样式
    selectRowKeys: Array, // 选中的行
    rowkey: Object, // 每一行的key
    loading: Boolean,
    isDialog: Boolean
  },
  watch: {
    selectRowKeys: function () {
      this.selectDefault(true)
    },
    dataList: function () {
      this.selectDefault()
    }
  },
  computed: {
    dataList: function () {
      const self = this
      let tmpData = this.data
      // 查询
      if (
        tmpData &&
        tmpData.length > 0 &&
        self.searchKeys &&
        self.searchKeys.length > 0
      ) {
        tmpData = tmpData.filter(element => {
          let sum = -1
          self.searchKeys.forEach(ele => {
            if (!element[ele]) {
              sum++
            }
            if (element[ele]) {
              sum +=
                element[ele]
                  .toString()
                  .toLowerCase()
                  .indexOf(self.searchText.toLowerCase()) >= 0
                  ? 1
                  : 0
            }
          })
          return sum >= 0
        })
      }
      // 排序
      if (self.sortProp) {
        if (self.sortOrder === 'asc') {
          tmpData = tmpData.sort((a, b) => {
            return a[self.sortProp] > b[self.sortProp] ? 1 : -1
          })
        } else if (self.sortOrder === 'desc') {
          tmpData = tmpData.sort((a, b) => {
            return a[self.sortProp] < b[self.sortProp] < 0 ? 1 : -1
          })
        }
      }
      if (tmpData) {
        // 分页总条数
        self.total = tmpData.length
        // 分页数据
        if (self.paginationData) {
          tmpData = tmpData.slice(
            (self.pageIndex - 1) * self.pageSizeData,
            self.pageIndex * self.pageSizeData
          )
        }
      }
      return tmpData
    }
  },
  methods: {
    pageChangeHandler: function (currentPage) {
      this.pageIndex = currentPage
    },
    sortChange: function (column, prop, order) {
      this.sortProp = column.prop

      switch (column.order) {
        case 'descending':
          this.sortOrder = 'desc'
          break
        case 'ascending':
          this.sortOrder = 'asc'
          break
        default:
          this.sortOrder = ''
          break
      }
    },
    tableExpandChange: function (e) {
      if (this.expandRowKeys && this.expandRowKeys[0] === e[this.expandKey]) {
        this.expandRowKeys = []
      } else {
        this.expandRowKeys = [e[this.expandKey]]
      }
      if (this.expandChange) {
        this.expandChange(e)
      }
    },
    selectDefault: function (clear) {
      const self = this
      if (this.selection && self.selectRowKeys) {
        setTimeout(() => {
          if (clear) {
            self.$refs.searchTable.clearSelection()
          }
          self.$refs.searchTable.clearSelection()
          this.dataList.forEach(ele => {
            debugger
            self.selectRowKeys.forEach(element => {
              if (ele[self.rowkey] === element) {
                self.$refs.searchTable.toggleRowSelection(ele)
              }
            })
          })
        })
      }
    },
    selectChange: function (rows, row) {
      if (this.selection) {
        this.selection(row, rows)
      }
    }
  }
}
</script>

<style lang="less">
.searchInput {
  float: right;
}
.page {
  text-align: center;
}
.smallPage {
  .el-pagination button {
    position: relative;
    top: 3px;
  }
  .el-pagination__jump {
    margin: 0px;
  }
}
.searchTable_main .el-table {
  height: 100%;
}
// .searchTable_table{
//   table tr td div{
//     max-height: 40px;
//     line-height: 40px !important;
//   }
// }
// 列表中展开行列表的样式
td .el-container {
  padding: 15px;
  background-color: white;
}
td .el-container .el-table {
  min-height: 300px;
}
td .el-tabs {
  padding: 15px;
  background-color: white;
}
.assets-table .el-table__body-wrapper {
  height: calc(100% - 40px) !important;
}
</style>
